<!DOCTYPE html>
<html>
<head>
    <title>Simple app</title>

    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller('TextAreaWithLimitCtrl', function ($scope) {
            $scope.message = "";
            var MAX_LEN = 100;
            var MIN_LEN = 10;
            var WARN_THRESHOLD = "不能超过100个字符";

            $scope.remaining = function () {

                return MAX_LEN - $scope.message.length > 0 ? MAX_LEN - $scope.message.length : WARN_THRESHOLD;

            };
            $scope.shouldWarn = function () {
                return $scope.remaining() == WARN_THRESHOLD;
            };
            $scope.hasValidLength = function () {
                return $scope.message.length > MIN_LEN && $scope.message.length < MAX_LEN;
            };
            $scope.clear = function () {
                $scope.message = "";
            }
        });
    </script>
    <style>
        .text-warning {
            color: red;
        }
    </style>
</head>
<body ng-app="app">

<div class="container" ng-controller="TextAreaWithLimitCtrl">
   <span ng-class="{'text-warning' : shouldWarn()}">
Remaining: {{remaining()}}
</span>

    <div class="row">
        <textarea ng-model="message">{{message}}</textarea>
    </div>

    <div class="row">
        <button ng-disabled="!hasValidLength()">Send</button>
        <button ng-click="clear()">Clear</button>
    </div>
</div>

</body>
</html>